<template>
  <section class="upload-dialog-container">
    <el-dialog
      :close-on-click-modal="false"
      v-loading="loading"
      :title="title"
      :visible.sync="dialogVisible"
    >
      <el-upload
        ref="upload"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-change="beforeUpload"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :auto-upload="autoUpload"
        :on-progress="handleProgress"
        v-bind="uploadProps"
      >
        <el-input :value="fileName" size="small">
          <div slot="append">
            <el-button
              style="width: 68px"
              slot="trigger"
              size="small"
              class="jee-bg-light-important"
              >选择文件</el-button
            >
          </div>
        </el-input>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="showCancel" @click="handleCancel" plain
          >取消</el-button
        >
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </el-dialog>
  </section>
</template>
<script>
export default {
  name: "",
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "600px",
    },
    title: {
      type: String,
      default: "新建",
    },
    showCancel: {
      type: Boolean,
      default: true,
    },
    buttons: {
      type: Array,
      default: () => [
        {
          text: "保存并继续新建",
          type: "Submit",
          keepAlive: true,
        },
        {
          text: "保存",
          type: "Submit",
        },
      ],
    },
    uploadProps: {
      type: Object,
      default: () => ({}),
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    name: {
      type: String,
      default: "fileName",
    },
    showFileList: {
      type: Boolean,
      default: true,
    },
    autoUpload: {
      type: Boolean,
      default: true,
    },
    accept: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      dialogVisible: false,
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
    };
  },
  computed: {
    fileName() {
      const len = this.fileList.length;
      return len > 0 ? this.fileList[this.fileList.length - 1].name : "";
    },
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    handleCancel() {
      this.dialogVisible = false;
    },
    handleConfirm() {
      this.$emit("handleConfirm");
      this.dialogVisible = false;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    beforeUpload(file, fileList) {
      return true;
    },
    handleProgress(event, file, fileList) {
      console.log(event);
    },
  },
};
</script>

<style lang="scss">
.upload-dialog-container {
  .el-upload {
    .el-progress.el-progress--line {
      .el-progress-bar {
        .el-progress-bar__outer {
          height: 10px !important;
          // .el-progress-bar__inner{}
        }
      }
    }
  }
}
</style>
